<template>
  <el-carousel :interval="4000" type="card" height="200px">
    <el-carousel-item v-for="item in imageList" :key="item.id">
      <img style="object-fit: cover; width: 100%;height: 100%" :src="item.idView" class="image">
    </el-carousel-item>
  </el-carousel>
  <br/>
  <el-table-v2
      :columns="columns"
      :data="data"
      :width="1200"
      :height="350"
      fixed
  />

</template>


<script lang="js" >
import axios from 'axios'
import {ApiUrls} from "@/api/api";
import { ref, h, resolveComponent } from "vue";
import { ElButton } from "element-plus";


export default {
  name: 'Advocate',
  data() {
    return {
      imageList: [
        {id: 0, idView: require('@/assets/37.jpg')},
        {id: 1, idView: require('@/assets/29.jpg')},
        {id: 2, idView: require('@/assets/91.jpg')},
        {id: 3, idView: require('@/assets/93.jpg')},
        {id: 4, idView: require('@/assets/96.jpg')},
        {id: 5, idView: require('@/assets/81.jpg')},
      ],
      screenWidth: 0,
      columns: [],
      data: [],
    }
  },
  methods: {
    async queryCourseGradeSmall() {
      try {
        const response = await axios.post(ApiUrls.queryCourseGradeSmall);
        console.log('Response from Java backend:', response.data);
        this.data = this.generateData(response.data.data); // 更新表格数据
      } catch (error) {
        console.error('Error fetching data from Java backend:', error);
        // 处理错误
      }
    },
    handleAction(row) {
      // 在这里处理按钮点击事件，可以访问当前行的数据 row
      console.log('点击了操作按钮，当前行数据为:', row);
      // 可以在这里实现具体的操作，比如打开弹窗、跳转页面等
    },
    generateColumns() {
      return [
        { key: 'sName', dataKey: 'sName', title: '姓名', width: 350 },
        { key: 'sBirth', dataKey: 'sBirth', title: '出生日期', width: 350 },
        { key: 'sSex', dataKey: 'sSex', title: '性别', width: 300 },
        {
          key: "editAndDelete",
          title: "操作",
          width: 150,
          cellRenderer: ({ cellData }) => h(
              'div',
              {

              },
              [
                h(ElButton, { size: "small" }, "Edit"),
                h(ElButton, { size: "small", type: "danger" }, "Delete")
              ]
          )
        }
      ];
    },
    generateData(rows) {
      return rows.map((row, index) => ({
        id: `${row.sid}`,
        parentId: null, // 如果有树形结构，可以设置父ID
        sName: row.sName,
        sBirth: row.sBirth,
        sSex: row.sSex,
        actions: 'actions'
      }));
    },

  },
  created() {
    this.queryCourseGradeSmall(); // 调用接口获取数据
    this.columns = this.generateColumns(5);
    this.data = this.generateData(this.columns, 5);
    this.handleAction = this.handleAction.bind(this); // 显式绑定方法
  },
}
</script>

<style>

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
